<template>
  <div class="all_order_box">
    <!--  <h1>This is the all order box</h1>-->

    <van-nav-bar title="所有订单"
                 left-text="返回"
                 left-arrow
                 @click-left="onClickLeft(4)" />
    <van-tabs v-model="active">
      <van-tab title="待付款">
        <div class="content scrollable-div scroll-wrapper ">
          <van-card v-for="(item, index) in orderList"
                    :key="index"
                    :num="item.num"
                    tag="代付款"
                    :price="item.price"
                    :desc="item.desc"
                    :title="item.title"
                    :thumb="getUIR1(item.img)"
                    origin-price="10.00" />
        </div>

      </van-tab>
      <van-tab title="待发货">
        <div class="content scrollable-div scroll-wrapper ">
          <van-card v-for="(item, index) in orderList"
                    :key="index"
                    :num="item.num"
                    tag="待发货"
                    :price="item.price"
                    :desc="item.desc"
                    :title="item.title"
                    :thumb="getUIR1(item.img)"
                    origin-price="10.00" />
        </div>

      </van-tab>
      <van-tab title="待收货">
        <div class="content scrollable-div scroll-wrapper">
          <van-card v-for="i in 10"
                    :key="i"
                    num="2"
                    tag="待收货"
                    price="2.00"
                    desc="描述信息"
                    title="商品标题"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
                    origin-price="10.00" />
        </div>

      </van-tab>
      <van-tab title="已完成">
        <div class="content scrollable-div scroll-wrapper">
          <van-card v-for="i in 10"
                    :key="i"
                    num="2"
                    tag="已完成"
                    price="2.00"
                    desc="描述信息"
                    title="商品标题"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
                    origin-price="10.00" />
        </div>

      </van-tab>
      <van-tab title="售后">
        <div class="content scrollable-div scroll-wrapper">
          <van-card v-for="i in 10"
                    :key="i"
                    num="2"
                    tag="售后"
                    price="2.00"
                    desc="描述信息"
                    title="商品标题"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
                    origin-price="10.00" />
        </div>

      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: "AllOrdersView",
  data () {
    return {
      active: 0,
      orderList:[
        {title : '爱在另一端',desc:'精美的蕾丝花边和精致的珠宝装饰，使得这款婚纱更加华丽和优雅。无论是在户外的花园',price:'2.00',img:'/profile/upload/讨论1.jpg'},
        {title : '粉色花海',desc:'这款婚纱以粉色为主色调，象征着爱情的甜蜜和纯洁。婚纱的设计灵感来源于盛开的花朵，象征着新婚夫妇的爱情正在如花般绽放',price:'2.00',img:'/profile/upload/粉色花海.png'}
      ]
    };
  },
  created () {
    this.active = this.$route.params.active
    // console.log("active = " + active)
  },
  methods: {
    //TODO 我有一个问题，就是为什么我 `onClickLeft(index)写就可以传入参数，可是当我 `onClickLeft()` 这样写就不能传入参数
    onClickLeft (index) {
      this.$router.push({ name: 'my_info', params: { nav_active: index } })
    },
    getUIR1(img) {
      // 修改方法中的返回语句
      return "http://192.168.205.250:8848/ChallengeCup" + img;
    }
  }
}
</script>

<style scoped>
.all_order_box {
  /*width: 100%;*/
  /*height: 100%;*/
  display: flex;
  flex-direction: column;
  height: 100%;
  /*max-height: 100%;*/
  overflow: hidden;
}
.scroll-wrapper {
  margin: 0 auto;
  max-height: 535px; /* Set the height of your scrollable div */
  width: 100%;
  overflow-y: auto; /* Enable vertical scrollbar when content overflows */
  /*overflow: scroll;*/
  /*overflow: hidden;*/
  /*border-right: 1px solid black;*/
  /*box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);*/
}
.scroll-wrapper::-webkit-scrollbar {
  display: none;
}
/*.scrollbar-wrap {*/
/*  overflow: auto; !* 显示滚动条 *!*/
/*  width: 336px;*/
/*  height: 90vh;*/
/*  background-color: skyblue;*/
/*}*/
.content {
  /*padding-top: 90px;*/
  /*padding-bottom: 90px;*/
}
</style>
